<template>
  <div>
    <OutlineNavBar/>
    <div style="background: #333333" >
      <div style="width: 1500px;margin: 0 auto;" id="box1">
        <el-breadcrumb separator-class="el-icon-arrow-right" style="width: 80%;margin-left: 10%;padding-top: 2%">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/' }" >课程中心</el-breadcrumb-item>
          <el-breadcrumb-item>{{all.title}}</el-breadcrumb-item>
        </el-breadcrumb>

        <el-row style="width: 80%;margin-left: 10%;padding-bottom: 1%;margin-top: 1%">
          <el-col :span="12"><div style="height: 333px">
            <img v-bind:src="all.cover" width="600px" height="333px" />
            <div style="position: relative;top:-100%;">
              <!--<div class="my_video">-->
                <!--<d-player ref="player" :options="options"></d-player>-->
              <!--</div>-->
              <div id="dplayer" style="height: 320px;"> </div>


            </div>
          </div>

          </el-col>
          <el-col :span="12">

            <!--课程不免费-->
            <div class="view_info" v-if="all.isFree==0">
              <div style="font-size: 18px;color: #fff;word-break: break-all;margin-bottom: 3%">{{all.title}}</div>
              <div style="color: #666666;margin-bottom: 3%">价格:<span style="">￥{{all.courseOriginal}}</span></div>
              <div style="color: #666666;border-bottom: #666666 1px solid;padding-bottom: 1%">SVIP:<span class="font_16">￥{{all.courseSvip}}</span> <a href="/#/SVIP" class="set_vip">立即开通 &gt;</a></div>
              <div style="color: #666666;margin-top: 3%">讲师:<span style="color: #666;font-size: 14px;margin-left: 20px">{{teacherData.lecturerUserName}}</span></div><!--教师名称-->
              <div>
                <div class="foot_box"><el-button type="danger" @click="buy">立即购买</el-button></div>
                <div class="foot_box1" @click="collect" v-if="this.qwe"><el-link :underline="false" style="font-size: 15px;color: red" class="links"><i class="el-icon-star-on" style="font-size: 20px"></i>已收藏</el-link></div>
                <div class="foot_box1" @click="collect" v-else>        <el-link id="sscc" :underline="false" style="font-size: 15px" class="links"><i class="el-icon-star-on" style="font-size: 20px"></i>收藏</el-link></div>
              </div>
            </div>

            <!--课程名费-->
            <div class="view_info" v-else  style="">
              <div style="font-size: 18px;color: #fff;word-break: break-all;margin-bottom: 3%">{{all.title}}</div>
              <!--<div style="color: #666666;margin-bottom: 3%">价格:<span style="">￥{{all.courseOriginal}}</span></div>-->
              <!--<div style="color: #666666;border-bottom: #666666 1px solid;padding-bottom: 1%">SVIP:<span class="font_16">￥{{all.courseSvip}}</span> <a href="/#/SVIP" class="set_vip">立即开通 &gt;</a></div>-->
              <div style="color: #666666;margin-top: 3%">讲师:<span style="color: #666;font-size: 14px;margin-left: 20px">{{teacherData.lecturerUserName}}</span></div><!--教师名称-->
              <div>
                <!--<div class="foot_box"><el-button type="danger" @click="buy">立即购买</el-button></div>-->
                <div class="foot_box1" @click="collect" v-if="this.qwe"><el-link :underline="false" style="font-size: 15px;color: red" class="links"><i class="el-icon-star-on" style="font-size: 20px"></i>已收藏</el-link></div>
                <div class="foot_box1" @click="collect" v-else>        <el-link :underline="false" style="font-size: 15px" class="links"><i class="el-icon-star-on" style="font-size: 20px"></i>收藏</el-link></div>
              </div>
            </div>
          </el-col>
        </el-row>

        <!--弹出层-->
        <el-dialog
          title="收银台"
          :visible.sync="dialogVisible"
          width="30%"
          >

          <table width="100%" style="text-align: center">
            <tr style="background-color: #F5F5F5;">
              <th></th>
              <th width="50%">课程名称</th>
              <th>价格</th>
            </tr>
            <tr valign="top">
              <th height="100px" style="text-align: center;">
                <img :src="all.cover" style="width: 150px;height: 80px;"/>
              </th>
              <td height="100px">{{all.title}}</td>
              <td style="color: red;" v-if="issvip==false">￥{{all.courseOriginal}}</td>
              <td style="color: red;" v-else>￥{{all.courseSvip}}</td>
            </tr>
            <tr align="left">
              <td colspan="3" height="50px">备注：<input type="text" v-model="remark" style="width:90%;border:none" placeholder="请输入你需要的备注！！"/></td>
            </tr>
            <tr align="left">
              <td colspan="3" height="80px">
                <!--<div >-->
                <img style="border: 1px solid #EC7F00;" src=""/>
                <!--</div>-->
              </td>
            </tr>
            <tr>
              <td colspan="3" align="right">
                <button @click="quxiao"  style="background-color: gainsboro;border: 0;width: 150px;height: 30px;cursor:pointer">取消</button>&nbsp;&nbsp;
                <button @click="comfir" style="background-color: #D51423;cursor:pointer;color: white;width: 150px;height: 30px;border: 0;">确定</button></td>
            </tr>
          </table>

        </el-dialog>



      </div>
    </div>
    <div style="background: #F5F5F5">
      <div style="width: 1500px;margin: 0 auto;">
        <el-row :gutter="20" style="width: 80%;margin-left: 10%">
          <el-col :span="19">
            <div style="padding-top: 20px" id="box">
                <el-tabs v-model="activeName" style="background: white;border:#F5F5F5;border-radius: 8px 8px 8px 8px;">
                    <el-tab-pane label="课程介绍" name="first">
                      <div style="background: #F5F5F5">
                        <div style="background:white;border:#F5F5F5;border-radius: 8px 8px 8px 8px;text-align: center;"></div>
                        <div style="background: #F5F5F5;height: 30px"></div>
                        <div style="padding: 30px;background: #fff;border-radius: 8px;min-height: 400px;" id="htmldata">
                        </div>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane label="课程大纲" name="second" >
                      <div style="background: #F5F5F5">
                        <div style="background:white;border:#F5F5F5;border-radius: 8px 8px 8px 8px;text-align: center;"></div>
                        <div style="background: #F5F5F5;height: 30px"></div>
                        <div style="padding: 30px;background: #fff;border-radius: 8px;min-height: 400px;">

                          <ul class="treeul"><!--style="display: none"-->
                            <li v-for='(data,index) in chapterData' style="font-size: 25px"> <span style="margin-right: 1%">第{{index+1}}章</span>{{data.chapterName}}
                              <ul>
                                  <li style="margin:0 0 0 -1%;"
                                      v-for='(data1,index) in data.children' @click="bofang(data1)" >
                                    <el-link :underline="false"type="info"><div style="width:800px;font-size: 20px;" id="bg" :class='{active: data1.id === periodinfo.id}'>
                                      <i class="el-icon-video-play" style="margin-right: 1%"></i>{{data1.periodName}}<span v-if="data1.isFree===1" style="float: right;font-size: 15px;color: #007F36">免费</span>
                                    </div></el-link>
                                    <!--<div v-if="$route.query.periodinfo.id === data1.id" style="color: red">-->
                                  </li>
                              </ul>
                            </li>
                          </ul>
                        </div>
                      </div>

                    </el-tab-pane>
                </el-tabs>
            </div>
          </el-col>

          <el-col :span="5"><div style="background: white;border-radius: 8px; margin-top: 20px">
            <div class="teacher_info clearfix"><span class="info_header">讲师简介</span>
              <div style="padding:5%">                                                                                <!--教师头像-->
                <el-link :underline="false"  class="links" style="float: left"> <el-avatar :size="60" v-bind:src="teacherData.headImgUrl"></el-avatar></el-link>
                <el-link  class="links" style="float: left"><div style="font-weight: bolder;font-size: 20px;padding:20px 0 0 10px">{{teacherData.lecturerUserName}}</div></el-link><!--教师名称-->
                <div style="float: right;padding-top: 20px" @click="atten" v-if="this.ewq"><el-link :underline="false" style="font-size: 15px;color: red" class="links"><i class="el-icon-star-on" style="font-size: 20px"></i>已关注</el-link></div>
                <div style="float: right;padding-top: 20px" @click="atten" v-else>         <el-link id="ggzz" :underline="false" style="font-size: 15px" class="links"><i class="el-icon-star-on" style="font-size: 20px"></i>关注</el-link></div>
              </div>
              <p style="padding:30px;"><br/>{{teacherData.introduce}}</p><!--教师简介-->
            </div>
          </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <Bottom/>
    <fixed/>
  </div>
</template>
<script>
  //import Prvideo from './Pvideo'
  import OutlineNavBar from './OutlineNavBar'
  import Bottom from '../Bottom'
  import Fixed from '../Fixed'
  import DPlayer from 'dplayer';
  import qs from 'qs'
    export default {
        name: "CourseOutline",
        components:{
          OutlineNavBar,
          Bottom,
          Fixed,
         // Prvideo
        },mounted(){
            this.showvieo1();
      },
        data(){
        return {
          qwe:'',
          ewq:'',
          activeName: 'first',
          tess: this.$route.query.type,
          all:JSON.parse(this.$route.query.all),
          periodinfo:'',
          teacherData:{},
          htmlData:'',
          chapterData:[],
          dialogVisible:false,
          url1:'',
          issvip:sessionStorage.getItem('issvip')==1,
          remark:'',
          orderId:0,
          shouCang:{
            courseNo:'',
            courseName:'',
            courseCover:'',
            userId:sessionStorage.getItem('uid'),
          },
          dplay:{
            video:{
              paused:true,
            }
          },
          UserLecturerAttention:{
            userId:sessionStorage.getItem("uid"),
            teacherId:''
          }
       }
     },
      /*watch:{
        activeName:{
          handler(newValue,oldValue){
            if (newValue=='second'){
              this.getPeriod();
            }
          }
        }
      },*/
      created(){
        this.getCourseData();
        //alert(this.issvip)
          //获取教师信息
        this.getTeacherById();
        //获取课程介绍
        this.getIntro();

        //判断该课程是否被该用户收藏过
        this.shouc();
      },
      methods:{
        //判断该课程是否被该用户收藏过
        shouc(){
          this.$axios2.post("student/stu/user-favorites/findUserAndCourse",qs.stringify({userId:this.shouCang.userId,courseNo:this.all.cid})).then(r=>{
            this.qwe=r.data;
          })
        },
        //获取当前课程信息
        getCourseData(){
          let edCuorse={
            lecturerId: this.all.lecturerId,
            title:this.all.title
          };
          //alert(JSON.stringify(edCuorse))
          this.$axios2.post("order/eduCourse/getOneCourse",qs.stringify(edCuorse)).then(r=>{
              //alert(JSON.stringify(r.data))
            this.all=r.data;
            //alert(JSON.stringify(this.all))
            //获取章节信息
            this.getChapter();

          })
        },
        //关注
        atten(){
          if (sessionStorage.getItem("uid") != null && sessionStorage.getItem("uid") != "") {
            this.getTeacherById();
            this.UserLecturerAttention.teacherId=this.teacherData.lecturerId;
            this.$axios2.post("student/stu/attention/findByUserAndLec",qs.stringify(this.UserLecturerAttention)).then(r=>{
              //如果r.data==true 说明后台查到了该用户关注过该讲师
              if (r.data){
                this.$message({
                  message: '您已经关注过该讲师了！',
                  type: 'success'
                });
              } else {//如果没有查到，就往讲师关注中添加一条数据
                this.$axios2.post("student/stu/attention/addAttention",qs.stringify(this.UserLecturerAttention)).then(r=>{
                  if (r.data){
                    this.$message({
                      message: '关注成功！',
                      type: 'success'
                    });
                    document.getElementById("ggzz").style.color="red";
                  } else{
                    this.$message.error("关注失败！")
                  }

                })
              }
            })
            //已登录
          }else {
            this.$message.error("请登录之后再来吧！！！")
          }
        },
        //收藏
        collect(){
          if (sessionStorage.getItem("uid") != null && sessionStorage.getItem("uid") != "") {
            //已登录
            this.shouCang.courseNo=this.all.cid;
            this.shouCang.courseName=this.all.title;
            this.shouCang.courseCover=this.all.cover;
            let uid =sessionStorage.getItem("uid");
            this.$axios2.post("student/stu/user-favorites/findUserAndCourse",qs.stringify({userId:uid,courseNo:this.all.cid})).then(r=>{
              if (r.data) {
                this.$message({
                  message: '您已经收藏过了',
                  type: 'success'
                });
              }else{
                this.$axios2.post("student/stu/user-favorites/addFavorites",qs.stringify(this.shouCang)).then(r=>{
                  if (r.data){
                    this.$message({
                      message: '收藏成功！',
                      type: 'success'
                    });
                    document.getElementById("sscc").style.color="red";
                  } else {
                    this.$message.error("收藏失败！")
                  }
                })
              }
            })
          }else {
            this.$message.error("请登录之后再来吧！！！")
          }
        },
        //购买按钮
        buy(){
          if (sessionStorage.getItem("uid") != null && sessionStorage.getItem("uid") != "") {
            //已经登陆 判断用户是否购买过课程
            this.$axios2.get("order/user-course/getOne?id="+sessionStorage.getItem("uid")+"&cid="+this.all.cid).then(r=>{
              if (r.data){
                //已经购买
                this.$message.warning("您已经购买此课程了！！！")
              } else {
                this.dialogVisible=true;
              }
            })
          }else {
            this.$message.error("请登录之后再来吧！！！")
          }

          //判断用户是否已经购买此课程
        },
      //取消按钮
        quxiao(){
          this.dialogVisible=false;
        },
        //确定按钮
        comfir(){
          //用户id 课程id 未支付
          this.$axios2.post("order/orderInfo/getOneOrder",qs.stringify({uid:sessionStorage.getItem("uid"),cid:this.all.cid})).then(r=>{
            if (r.data) {
              //有未支付订单
              this.$message.warning("您有未支付订单哦！！")
            }else {
              let orderNo=new  Date().getTime();
              //不是vip
              let money=sessionStorage.getItem("issvip")==1?this.all.courseSvip:this.all.courseOriginal;
              let orderinfo={
                lecturerId:this.all.lecturerId,
                lecturerName:this.teacherData.lecturerUserName,
                userNo:sessionStorage.getItem("uid"),
                mobile:this.teacherData.lecturerPhone,
                courseId:this.all.cid,
                courseName:this.all.title,
                orderNo:orderNo,
                pricePayable:money,
                platformProfit:money*0.2,
                lecturerProfit:money*0.8,
                orderStatus:0,
                remarkCus:this.remark
              };
              //alert(JSON.stringify(orderinfo))
              this.$axios2.post("order/orderInfo/addData",qs.stringify(orderinfo)).then(r=>{
                //alert(JSON.stringify(r.data))
                this.orderId=r.data;
                if (this.orderId!=null){
                  let dd={
                    orderno:orderinfo.orderNo,
                    money:orderinfo.pricePayable
                  };
                  let temp=document.createElement("form");
                  temp.action="http://localhost:8898/order/toPay";
                  temp.method="post";
                  temp.style.display="none";
                  for (let ddKey in dd) {
                    let opt=document.createElement("textarea");
                    opt.name=ddKey;
                    opt.value=dd[ddKey];
                    temp.appendChild(opt);
                  }
                  document.body.appendChild(temp);
                  temp.submit();
                  return temp;

                }
              });
            }
          })




        },
        //获取播放时间
       async gettime(id){
          //alert(this.dplay.video.currentTime);
          let data = new Object();
          data.id =id;
          data.videoId = this.dplay.video.currentTime;
        await  this.$axios2.post("showdata/eduChapterPeriod/updatebyTime",qs.stringify(data)).then(r=>{
          this.getChapter();
        }),function () {alert("失败")}
        },
        showvieo(url,id,time){
          let  vm =this;
          const dp = new DPlayer({
            container: document.getElementById('dplayer'),
            video: {
              url: url,
            },
          });
          this.dplay = dp;
          dp.seek(time);
          //dp.video.paused;
          dp.on('pause', function () {
            //alert('暂停了');
             vm.gettime(id);
          });
          dp.on('seeked', function () {
            //alert('暂停了');
            vm.gettime(id);
          });

        },
        //从我的课程跳转播放
        showvieo1(){
          if(this.$route.query.periodinfo != null && this.$route.query.periodinfo != ''){
            this.activeName = 'second';
             this.periodinfo = this.$route.query.periodinfo;
            //alert(JSON.stringify(periodinfo));
            this.showvieo(this.periodinfo.docUrl,this.periodinfo.id,this.periodinfo.videoId);
          }
        },
        bofang(row){
          //alert(JSON.stringify(row));
          if(this.dplay.video.paused == false){
            this.$message({
              duration: 3000,
              message: '请先关闭或暂停当前视频',
              type: 'warning'
            });
          }else {
            if (sessionStorage.getItem("uid") != null && sessionStorage.getItem("uid") != "") {
              //alert(JSON.stringify(row));
              //alert(this.dplay.video.paused);
              //判断用户是否购买
              this.$axios2.get("order/user-course/getOne?id="+sessionStorage.getItem("uid")+"&cid="+row.courseId).then(r=>{
                //alert(JSON.stringify(r.data))
                //先判断用户是否购买
                if (r.data) {
                  //已经购买 播放 添加到我的课程学习和学习记录
                  this.periodinfo = row;
                  this.showvieo(row.docUrl, row.id, row.videoId);
                  //点击节后将当前学习记录添加到购买课程里
                  //节id 节名称 章id 章名称 创建时间
                  let course={
                    coursePeroidId:row.id,
                    chapterPeriodId:row.id,
                    coursePeroidName:row.periodName,
                    courseChapterId:row.chapterId,
                    courseId:row.courseId,
                    userId:sessionStorage.getItem("uid")
                  };
                  this.$axios2.post("showdata/userCourse/addData",qs.stringify(course)).then(r=>{
                    //添加到学习表
                  });
                  //添加到学习记录表
                  this.$axios2.post("student/stu/user-study/addData",qs.stringify(course)).then(r=>{

                  })
                }else {
                  //没有购买 判断是否是免费节 课程是否是免费
                  if (row.isFree == 1 || this.all.isFree==1) {
                    //免费节 播放 添加到学习记录表
                    this.showvieo(row.docUrl, row.id, row.videoId);
                    //添加到学习记录表
                    let course={
                      chapterPeriodId:row.id,
                      courseId:row.courseId,
                      userId:sessionStorage.getItem("uid")
                    };
                    this.$axios2.post("student/stu/user-study/addData",qs.stringify(course)).then(r=>{

                    })
                  }else {
                    //没有购买 不是免费章节
                    this.$message.error("当前章节为付费内容，请先购买课程！！")
                  }
                }
              })
            } else {
              this.$message.error("请先登录再来！！")
            }
          }
        },
          aaa(val){
            //alert()
            let pid=val.currentTarget.firstElementChild.firstElementChild.innerHTML;
            this.$axios2.get("showdata/eduChapterPeriod/findByCid?cid="+pid).then(r=>{
              /*alert(JSON.stringify(r.data))*/
              this.periodData=r.data;
            })
          },
        //查询课程的教师
        getTeacherById(){
          let tid=this.all.lecturerId;
          this.$axios2.get("showdata/lecturer/findById?lecturerId="+tid).then(r=>{
            //alert(JSON.stringify(r.data))
            this.teacherData=r.data;
            //判断目前登录的用户有没有关注该讲师
            this.UserLecturerAttention.teacherId=this.teacherData.lecturerId;
            this.$axios2.post("student/stu/attention/findByUserAndLec",qs.stringify(this.UserLecturerAttention)).then(r=>{
              this.ewq=r.data
            })
          });
        },
        //查询课程介绍
        getIntro(){
          let inid=this.all.inid;
            this.$axios2.get("showdata/courseIntroduce/findById?id="+inid).then(r=>{
              //this.htmlData=r.data.introduce;
              document.getElementById("htmldata").innerHTML=r.data.introduce;
            })
        },
        //查询课程所有章 节内容
        getChapter(){
            let cid=this.all.cid;
            //alert(cid);
            this.$axios2.get("showdata/eduChapter/findByCid?courseId="+cid).then(r=>{
                //alert(JSON.stringify(r.data))
              this.chapterData=r.data;
            })
        },
        //查询章的每一课
        /*async getPeriod(){
            //alert(JSON.stringify(this.chapterData))
            if (this.chapterData.length>0){
              //下标
              let  index=document.getElementById("zhangid").innerText;
              //通过下标
               let pid=this.chapterData[index].id
              alert(pid)
              await this.$axios2.get("showdata/eduChapterPeriod/findByCid?cid="+pid).then(r=>{
                //alert(JSON.stringify(r.data))
                this.periodData=r.data;
              })
            }
        }*/
      }
    }

</script>

<style scoped>
  input:focus{
    outline: none;
  }
  #box>>>.el-tabs__nav-scroll{
    border-radius: 8px;
    border:white;
  }
  #box>>>.el-tabs__nav-wrap::after {
    background-color: white;
  }
  #box>>>.el-tabs__nav-wrap{
    background-color: white;
  }
  #box>>>.el-tabs__active-bar{
    background-color: #f56c6c;
  }
  #box>>>.el-tabs__item.is-active {
    color: red;
  }

  #box>>>.el-tabs__nav.is-top{
    margin-left: 5%;
    height: 50px;
  }
  #box>>>.el-tabs__header {
    margin: 0 0 1px;
  }
  #box>>>.el-tabs__item{
    font-weight: bolder;
    font-size: 15px;
  }
  #box>>>.el-tabs__item:hover{
    color: red;
  }
  .treeul li{
    list-style:none;
    margin: 2%;
  }
  #box1>>>.el-breadcrumb__inner.is-link{
    color: white;
  }
  #box1>>>.el-breadcrumb__inner {
    color: white;
  }
  .view_info {
    float: right;
    width: 570px;
    height: 333px;
    position: relative;
    /*border: 1px solid aqua;*/
  }
  .view_info span{
    font-size: 24px;color: #d51423;font-weight: 700;margin-left: 20px;
  }
   .foot_box {
    position: absolute;
    bottom: 1%;
    /*width: 100%;*/
    height: 36px;
  }
  .foot_box1 {
    position: absolute;
    left: 85%;
    bottom: -2%;
    /*width: 100%;*/
    height: 36px;
  }
   .set_vip {
    color: #09f;
    margin-left: 6px;
  }
  .links:hover {
    color:red;
  }
  .info_header {
    display: block;
    line-height: 60px;
    height: 60px;
    padding-left: 20px;
    font-size: 14px;
    color: #333;
    border-bottom: 1px solid #e4e4e4;
  }

  .info_p {
    font-size: 14px;
    line-height: 30px;
    color: #333;
    padding-left: 8px;
  }
  img {
    max-width: 100%;
    border: none;
  }
  #bg:hover {
    background: #F5F5F5;
  }
  .active{
    color: red;
  }
</style>
